<!--
 * @Date: 2023-01-13 11:39:30
 * @LastEditTime: 2023-02-14 10:39:37
 * @FilePath: /hash-guess-game/src/component/Tag/Tag.vue
 * 介绍:Tag标签
-->
<script lang="ts" setup name="Tag">
import type { Enum } from "./index";
const className = {
  default: "Tag__default",
};

const props = defineProps<{
  type?: keyof typeof className;
  enum?: Enum[];
  value?: string | number;
}>();
const current = computed(() => {
  return props.enum?.filter((val) => val.value == props.value)[0];
});
</script>

<template>
  <span
    :style="current?.style"
    :class="[className[props.type || 'default'], current?.class]"
    class="Tag"
  >
    <slot> {{ current?.text }} </slot>
  </span>
</template>

<style lang="less" scoped>
.Tag {
  font-size: var(--T-S-xs);
  line-height: var(--T-S-md);
  padding: 0.2em 1em;
  background-color: var(--C-M2);
}
.Tag__default {
  border-radius: 999rem;
}
</style>
